<template>
	<div :class="{ 'game-header': !!gameId, 'trade-header': true }" :style="headerStyle">
		<div class="back-icon" :style="backIconStyle" @click="back">
			<i class="iconfont icon-fanhui" />
		</div>
		<ul :class="{ 'game-tab': !!gameId }">
			<li>
				<router-link to="/trade/buyin" replace>买入</router-link>
			</li>
			<li>
				<router-link to="/trade/sellout" replace>卖出</router-link>
			</li>
			<li v-if="gameId==''" >
				<router-link to="/trade/cancel" replace>委/撤</router-link>
			</li>
      <li v-else >
        <router-link to="/trade/gamecancel" replace>撤单</router-link>
      </li>
			<li v-if="gameId==''" style="margin-right: 0;">
				<router-link to="/trade/stock" replace>持仓</router-link>
			</li>
      <li v-else style="margin-right: 0;">
        <router-link to="/trade/gamestock" replace>查询</router-link>
      </li>
		</ul>

	</div>
</template>

<script>

	export default {
	  data(){
      const { path } = this.$route
	    return {
  	      gameId:'',
  				imgShow: path === '/trade/cancel'
            || path === '/trade/gamecancel'
            || path === '/trade/gamestock'
        }
      },
			created(){
					this.gameId =  this.$route.query.gameId
            ? this.$route.query.gameId : '';

			},
      mounted () {
        // initial store
        this.$store.dispatch('clearTrade')
      },
      computed: {
        headerStyle () {
          return {
            backgroundColor: !!this.gameId
              ? 'rgba(229, 79, 32, 0.3)' : 'rgba(124, 15, 15, 0.3)',
            backgroundPosition: !this.imgShow
              ? '100% -26%'
              : '-100% -100%'
          }
        },
        backIconStyle () {
          return {
            backgroundColor: !!this.gameId ? 'rgba(209, 50, 0, 1)' : 'rgba(43,4,4,0.3)',
            border: !!this.gameId ? '1px solid #FFBC80' : '1px solid #FF5B5B'
          }
        }
      },
      watch: {
        '$route' (val) {
          const { path } = val
          this.imgShow = path === '/trade/cancel'
            || path === '/trade/gamecancel'
            || path === '/trade/gamestock'
        }
      },
      methods:{
        back(){
          if (typeof (this.$route.query.cleanStorage) !== 'undefined') {
    				window.location.href = "gtjanormal://goback";
      		} else{
        			this.$router.go(-1);
      		  }
				}
      }
	}
</script>

<style lang="less">

	.trade-header {
		position: fixed;
		z-index: 1040;
		top: 0;
		left: 0;
		width: 100%;
		height: 44px;
    // background-image: url(../../assets/images/trade/monijiaoyi.png);
    // background-repeat: no-repeat;
    // background-position: 100% -40%;
		// background-image: url('~assets/images/bg-watermark.png');
		// background-size: cover;
		// background-position: 0 0;


	}

  // .vux-popup-mask {
  //   z-index: 1999!important;
  // }

  // .vux-popup-dialog {
  //   z-index: 2000!important;
  // }

  .game-header {
    .game-tab {
      border: 1px solid #FFBC80;
      background-color: rgba(209, 50, 0, 1);
    }

    .router-link-active {
      color: #FF4E00!important;
    }

    a:hover {
      color: #FF4E00!important;
      text-decoration: none;
    }

    // background-image: url(../../assets/images/trade/monibisai.png);
    // background-repeat: no-repeat;
  }

	.trade-header a {
		display: inline-block;
		width: 100%;
		height: 100%;
		position: relative;
		font-size: 16px;
		color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;

    &:hover {
      color: #E52929;
      text-decoration: none;
    }
	}

	.trade-header a:hover {
		// color: #E52929;
		// text-decoration: none;
		// background-color: #FFFFFF;
		// border-radius: 99px;
	}
	.trade-header a:focus {
		color: #E52929;
		text-decoration: none;
	}
	.trade-header .router-link-active {
		color: #E52929;
		text-decoration: none;
		background-color: #FFFFFF;
		border-radius: 99px;
	}
	.trade-header ul {
		// padding-left: 45px;

		padding-left: 0;
		background-color: RGBA(43, 4, 4, 0.3);
		border: 1px solid #FF5B5B;
		width:260px;
    height: 30px;
		line-height: 30px;
    margin:7px auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 15px;

    @media screen and (max-width: 350px) {
      margin-left: 47px;
    }
	}

	.trade-header li {
		display: flex;
		justify-content: center;
		align-items: center;
    text-align: center;
		list-style: none;
		height:28px;
    line-height: 28px;
    width: 60px;
    text-align: center;
    float: left;
    font-size: 15px;
    color: #FFFFFF;
    margin-right:6px;
	}

	.back-icon {
		position: absolute;
	    line-height: 32px;
	    font-size: 20px;
	    width: 36px;
	    height: 36px;
	    text-align: center;
	    border-radius: 50%;
	    margin-top: 4px;
	    margin-left: 8px;
			display: flex;
      align-items: center;
			justify-content: center;

		i {
			font-size: 22px;
    		line-height: 36px;
    		color: #FFF;
		}
	}
</style>
